<template>
	<view class="container">
		<!-- 头像部分 -->  
		<view class="avatar-container">  
			<image class="avatar" :src="user.avatar" mode="aspectFill"></image>  
		</view>  
		
		<!-- 按钮部分 -->  
		<view class="button-container">  
			<!-- 查看头像按钮 -->  
			<button class="button" @click="viewAvatar">查看头像</button>  
			<!-- 小空隙 -->  
			<view class="button-gap"></view>  
			<!-- 从相册中选择按钮 -->  
			<button class="button" @click="selectFromAlbum">从相册中选择</button>  
		</view>  
	</view>
</template>

<script>
import {hasLogin, logout, getUserid} from '@/store/index.js'

	export default {
		data() {
			return {
				user: {
					avatar: ''
				}
			}
		},
		onLoad() {
			if (hasLogin()) {
				// 发起请求获取用户信息
				let userInfoStr = uni.getStorageSync("userInfo");
				if (userInfoStr) {
				    let userInfo = JSON.parse(userInfoStr);
					this.user.avatar = userInfo.avatar || '';
				}
			}
		},
		methods: {
			viewAvatar(){
				// 实现查看头像的功能
				// 通过uni.previewImage来预览图片
				uni.previewImage({
					urls: [this.user.avatar], // 需要预览的图片链接列表
					current: this.user.avatar // 当前显示图片的链接
				});
			},
			selectFromAlbum(){
				// 实现从相册选择头像的功能
				// 你可以在这里添加从相册选择头像的逻辑，比如调用uni.chooseImage来选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						// 选择成功后的操作
						console.log("操作成功");
					},
					fail: (error) => {
						// 选择失败的操作
						console.log("操作失败");
					}
				});
			},
			
		}
	}
</script>

<style scoped>
.container {  
	display: flex;  
	flex-direction: column;  
	align-items: center;  
	justify-content: center;  
	height: 100%;  
}  
.avatar-container {  
	width: 80%;
	height: 200px; /* 根据需要调整头像容器的高度 */  
	margin-top: 10%;
	margin-bottom: 20px; /* 头像与按钮之间的空隙 */  
} 

.avatar {  
	width: 100%;  
	height: 100%;  
	object-fit: cover;  
}  
.button-container {  
	width: 100%;  
	display: flex;  
	flex-direction: column;  
	align-items: center;  
}  
.button {  
	width: 80%; /* 按钮宽度 */  
	height: 50px; /* 按钮高度 */  
	margin-bottom: 10px; /* 按钮之间的空隙 */  
	background-color: #007AFF; /* 按钮背景色 */  
	color: #FFFFFF; /* 按钮文字颜色 */  
	border: none;  
	border-radius: 5px; /* 按钮圆角 */  
}  
.button-gap {  
	height: 10px; /* 小空隙的高度 */  
}  
.container {
	display: flex;
 	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
.avatar-container {
	margin-bottom: 20px;
}
.avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
.button-container {
	display: flex;
}
.button {
	padding: 10px 20px;
	background-color: #007bff;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
}
.button-gap {
	width: 10px;
}
</style>
